<template>
    <div>
        <div v-if="!content.length" class="content__top">
            <el-button @click="handleAddContent" type="primary">添加内容</el-button>
        </div>
        <el-table :data="content" style="width: 100%">
            <el-table-column type="index" width="80">
            </el-table-column>
            <el-table-column prop="title" label="名称">
            </el-table-column>
            <el-table-column label="操作" width="240">
                <template slot-scope="scope">
                    <PersButton type="primary" perms="kanke:textbook:courseware:edit" label="修改"
                        @click="handleEdit(scope.row)" />
                    <el-divider direction="vertical"></el-divider>

                    <PersButton type="danger" perms="kanke:textbook:courseware:del" label="删除"
                        @click="handleDel(scope.row.id)" />
                </template>
            </el-table-column>
        </el-table>
        <Makepage v-if="makeVisible" :makeVisible.sync="makeVisible" :unit_id="unit_id" :course_id="id"
            @handleFinish="handleFinish" :editId="editId" />
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import Makepage from './Makepage.vue';

export default {
    name: "KanKeTextbookCourseWarePPTContent",
    props: {
        content: {
            type: Array,
            default() {
                return []
            }
        },
        id: {
            type: [String, Number],
            default: ''
        }
    },
    components: {
        Makepage,
    },
    data() {
        return {
            makeVisible: false,
            editId: 0
        }
    },
    computed: {

        unit_id() {
            return this.$route.query.unit_id || ''
        },
    },
    methods: {
        ...mapActions("courseware", ['getContent']),

        handleAddContent() {
            this.$store.commit('courseware/setContentDetail', {})
            if (!this.id) {
                this.$message.error('参数错误, 请增加课本后再添加内容')
                return
            }
            this.makeVisible = true
        },

        handleFinish() {
            this.makeVisible = false
            this.getContent({ id: this.id })
        },
        handleEdit({ id }) {
            this.editId = id
            this.makeVisible = true
        },
        handleDel(id) {
            this.$confirm('是否删除该内容', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('handleDelContent', id)
            })
        }
    }

}
</script>
<style lang="scss" scoped></style>